<template>

    <view class="w-f h-100 tabbar f jc-s-b ai-c"  :style="{ paddingBottom: safeAreaBottom + 'px',paddingTop: safeAreaBottom-10 + 'px' }" >
        <view v-for="(item, index) in list" :key="index" class="f fd-c tabbar-box ai-c" @click="toTab(item)">
            <image :src="tab == index ? item.selectedIconPath : item.iconPath" class="w-44 h-44"></image>
            <view class="fs-20 text-color3 mt-8" :style="{ color: tab == index ? '#fabb3c' : '' }">{{ item.text }}</view>
        </view>
    </view>

</template>
<script setup lang="ts">
import { ref } from 'vue';
import index from '@/static/tabbar/index.png';
import top from '@/static/tabbar/top.png';
import novice from '@/static/tabbar/novice.png';
import noviceSelect from '@/static/tabbar/novice-select.png';
import shop from '@/static/tabbar/shop.png';
import shopSelect from '@/static/tabbar/shop-select.png';
import serve from '@/static/tabbar/serve.png';
import serveSelect from '@/static/tabbar/serve-select.png';
import wode from '@/static/tabbar/wode.png';
import wodeselect from '@/static/tabbar/wode-select.png';
const props = defineProps({
    tab: {
        type: Number,
        default: 0,
    },
    indexRoll: {
        type: Boolean,
        default: false,
    },
});
const list = ref([
    {
        pagePath: '/pages/index/index',
        text: '首页',
        iconPath: index,
        selectedIconPath: top,
    },
    {
        pagePath: '/pages/novice/index',
        text: '新手养宠',
        iconPath: novice,
        selectedIconPath: noviceSelect,
    },
    {
        pagePath: '/pages/shop/index',
        text: '商城',
        iconPath: shop,
        selectedIconPath: shopSelect,
    },
    {
        pagePath: '/pages/serve/index',
        text: '服务',
        iconPath: serve,
        selectedIconPath: serveSelect,
    },
    {
        pagePath: '/pages/mine/index',
        text: '我的',
        iconPath: wode,
        selectedIconPath: wodeselect,
    },
]);
const toTab = (item) => {
    uni.switchTab({
        url: item.pagePath,
    });
};
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
    .tabbar-box {
        width: 20%;
    }
}
</style>
